<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>ระบบฐานข้อมูลครุภัณฑ์</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link href="public/css/style.css" rel="stylesheet" type="text/css"/>

    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    <!-- Bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="public/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap -->

    <script type="text/javascript">
        $(document).ready(function(){
            $('#tabs').tabs()});
    </script>



    <style type="text/css">

        .ui-tabs.ui-tabs-vertical {
            padding: 0;
            width: 42em;
        }

        .ui-tabs.ui-tabs-vertical .ui-widget-header {
            border: none;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav {
            float: left;
            width: 10em;
            background: #CCC;
            border-radius: 4px 0 0 4px;
            border-right: 1px solid gray;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            margin: 0.2em 0;
            border: 1px solid gray;
            border-width: 1px 0 1px 1px;
            border-radius: 4px 0 0 4px;
            overflow: hidden;
            position: relative;
            right: -2px;
            z-index: 2;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
            width: 100%;
            padding: 0.6em 1em;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
            cursor: pointer;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            margin-bottom: 0.2em;
            padding-bottom: 0;
            border-right: 1px solid white;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
            margin-bottom: 10px;
        }

        .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
            float: left;
            width: 28em;
            border-left: 1px solid gray;
            border-radius: 0;
            position: relative;
            left: -1px;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="header_resize">
            <div class="logo">
                <h1><a href="index.html">Durable goods management
                        <small>Faculty of Engineering, Thammasat University.</small>
                    </a></h1>
            </div>
            <div class="menu_nav">
                <ul>
                    <li class="active"><a href="index.html"><span>Home Page</span></a></li>

                    <li><a href="about.html"><span>About Us</span></a></li>

                    <li><a href="contact.html"><span>Contact Us</span></a></li>
                </ul>
            </div>
            <div class="clr"></div>

        </div>
    </div>